<template>
  <div class="allChannels" :style="isAllChannelShow?'':'display:none'">
    <div class="cateTag"
         @click="changeIndex(0)"
         :class="{active: txtIndex === 0}"
    >
      <div class="txt">推荐</div>
    </div>
    <div class="cateTag"
         v-for="(category,index) in categories"
         :key="index"
         @click="changeIndex(index+1)"
         :class="{active: index === txtIndex-1}"
    >
      <div class="txt">{{category.text}}</div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'index',
    props:{
      isAllChannelShow: Boolean,
    },
    data () {
      return {
        txtIndex: 0,
      }
    },
    computed: {
      ...mapState({
        categories: state => state.home.categories
      })
    },
    methods:{
      changeIndex(index){
        this.txtIndex = index
      }
    },
    mounted () {
      this.$store.dispatch('getMenuCategory')
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .allChannels
    z-index 50
    box-sizing border-box
    margin 24px 0 0
    height 312px
    display float
    /*display flex*/
    /*flex-wrap wrap*/
    justify-content space-around
    .cateTag
      float left
      width 150px
      height 56px
      margin 0 0 40px 30px
      line-height 56px
      font-size 24px
      text-align center
      border 1px solid #ccc
      background #fafafa
      
      &.active
        color #B4282D
        border 1px solid #B4282D
</style>
